// let pageArr = [5, 6, 7, 8, 9, 10];
// let coun = pageArr[0];
// // 渲染每页显示条数
// // loc是渲染的位置${''},是一个jq对象节点,对应元素最好是li，可以使用boostrap里的下拉菜单；pageArr是渲染条数的数组
// window.onload = () => {
//     pageArr.forEach(item => {
//         $('.dropdown-menu').append(`
//                   <li data-num="${item}">
//                      <a href="#">每页显示 ${item} 条</a>
//                   </li> 
//      `)
//     })
//     $('.dropdown-menu').on('click', 'li', function () {
//         coun = parseInt($(this).attr('data-num'));
//         showDate();
//     });
// }

// const { json } = require("express");

// let count = 5; //每一页的条数
let page = 1; //当前页
let pageArr = [5, 6, 7];
let count = pageArr[0]
let maxpage

//渲染页面
showData()
function showData() {
    $.ajax({
        url: '/salary/query',
        data: {
            count: count,
            page: page
        },
        success: (res) => {
            if (res.error) {
                console.log(res.error);
            } else {
                // 渲染表格
                $('tbody').html('')
                $(res.data).each((index, item) => {
                    $('tbody').append(`
                    <tr data-id="${item.p_id}">
                        <td>${item.p_id}</td>
                        <td>${item.p_number}</td>
                        <td>${item.p_project}</td>
                        <td>${item.p_state}</td>
                        <td>${item.p_type}</td>
                        <td>${item.p_data}</td>
                        <td>${item.p_length}</td>
                        <td>${item.p_precision}</td>
                        <td>${item.p_note}</td>
                        <td>${item.p_founder}</td>
                        <td>${item.p_founderTime}</td>
                        <td>${item.p_update}</td>
                        <td>${item.p_updateTime}</td>
                        <td>
                        <button class="myModal" data-number='${JSON.stringify(item)}'><span class="iconfont icon-pen">修改</span></button>
                        <button class="del"><span class="iconfont icon-lajitong">删除</span></button>

                        </td>
                    </tr>
                    `);
                });
                // 渲染页码
                $('#myli').html('')
                maxpage = Math.ceil((res.total / count))
                for (let i = 1; i <= Math.ceil((res.total / count)); i++) {
                    if (page == i) {
                        $('#myli').append(`
                                <a id="a" class="active new_page" href="javascript:;">${i}</a>
                                        `)
                    } else {
                        $('#myli').append(`
                        <a href="javascript:;" id="a">${i}</a>
                       `)
                    }
                }
            }
        }
    });
};
// showDate();
// 点击页码
$('.pagination').on('click', '#a', function () {
    console.log($(this).text());
    page = $(this).text();
    showData();
});


//点击修改页面条数
function getpage(arr) {
    pageArr.forEach(item => {
        $('.dropdown-menu').append(`
                      <li data-num="${item}">
                         <a href="#">每页 ${item} 条</a>
                      </li> 
         `)
    })
    $('.dropdown-menu').on('click', 'li', function () {
        console.log($(this).attr('data-num'))
        count = parseInt($(this).attr('data-num'))
        // let Arr=$(this).parents('button').text()
        // console.log($(this).parents().s)
        showData();
    })
}
getpage(pageArr)

//点击上一页
$('.pagination').on('click', '.page_left', function () {
    // console.log($(this).text())
    if (page > 1) {
        page--
    } else {
        page = 1
    }
    showData()
})

//点击下一页
$('.pagination').on('click', '.page_right', function () {
    // console.log($(this).text())
    if (page != maxpage) {
        page++
    } else {
        page = maxpage
        console.log(maxpage)
    }
    showData()
})
//删除
$('tbody').on('click', '.del', function () {
    console.log($(this).parents('tr').attr('data-id'))
    if (confirm('确认删除这条数据吗？')) {
        $.ajax({
            url: '/salary/del',
            method: 'post',
            data: {
                id: $(this).parents('tr').attr('data-id'),
            },
            success: (res) => {
                if (res.error) {
                    console.log(res.msg)
                } else {
                    // alert('确认删除这条数据吗？')
                    showData();
                }
            }
        })
    }
})
//查询搜索
$('.query').click(() => {
    console.log($('#number input[type=text]').val())
    console.log($('#number input[type=text2]').val())
    console.log($("select[name='selectType']").val())
    console.log($("select[name='selectState']").val())
    $.ajax({
        url: '/salary/sousuo',
        method: 'post',
        data: {
            number: $('#number input[type=text]').val(),
            nmae: $('#number input[type=text2]').val(),
            type: $("select[name='selectType']").val(),
            state: $("select[name='selectState']").val()
        },
        success: (res) => {
            if (res.error) {
                console.log(res.erro);
            } else {
                // 渲染表格
                $('tbody').html('')
                $(res.data).each((index, item) => {
                    $('tbody').append(`
                    <tr data-id="${item.p_id}">
                        <td>${item.p_id}</td>
                        <td>${item.p_number}</td>
                        <td>${item.p_project}</td>
                        <td>${item.p_state}</td>
                        <td>${item.p_type}</td>
                        <td>${item.p_data}</td>
                        <td>${item.p_length}</td>
                        <td>${item.p_precision}</td>
                        <td>${item.p_note}</td>
                        <td>${item.p_founder}</td>
                        <td>${item.p_founderTime}</td>
                        <td>${item.p_update}</td>
                        <td>${item.p_updateTime}</td>
                        <td>
                        <button class="myModal" data-number='${JSON.stringify(item)}'><span class="iconfont icon-pen">修改</span></button>
                        <button class="del"><span class="iconfont icon-lajitong">删除</span></button>
                        </td>
                    </tr>
                    `);
                });
                // 渲染页码
                $('#myli').html('')
                maxpage = Math.ceil((res.total / count))
                for (let i = 1; i <= Math.ceil((res.total / count)); i++) {
                    if (page == i) {
                        $('#myli').append(`
                                <a id="a" class="active" href="javascript:;">${i}</a>
                                        `)
                    } else {
                        $('#myli').append(`
                        <a href="javascript:;" id="a">${i}</a>
                       `)
                    }
                }
            }
        }
    })
})
//重置
$('.reset').click(() => {
    showData()
    $('#number input[type=text]').val('')
    $('#number input[type=text2]').val('')
    $("select[name='selectType']").val('')
    $("select[name='selectState']").val('')
})
//增加 在xinzengxinchouxiangmu.js里面

//修改
let id
let number
$('tbody').on('click', '.myModal', function () {
    location.href = './bianjixinzixiangmu.html'
    id = $(this).parents('tr').attr('data-id');
    number = JSON.parse($(this).attr('data-number'));
    console.log(number)
    console.log(id);

    localStorage.setItem('id', JSON.stringify(id))
    localStorage.setItem('number', JSON.stringify(number))
})

